<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>EZOPEN播放协议</title>
  <style>
    body {
      margin: 0;
    }
    .hint {
      font-size: 14px;
      line-height: 3em;
      color: gray;
    }
    #url,
    #url2,
    #urlList,
    #accessToken {
      width: 100%;
    }

    .btn-container {
      margin: 10px;
    }
    .normal {
      color: green;
      margin: 5px;
    }
    .error {
      color: red;
      margin: 5px;
    }
  </style>
</head>
<script>
</script>

<body>
  <script src="../ezuikit.js"></script>
  <!-- <script src="../js/jsPlugin-1.2.0.js"></script> -->
  <script src="../js/jquery.min.js"></script>
  <div class="hint">demo页面仅为代码示例无法直接运行，需要部署到服务器上才可以播放。另外监控模式与多窗口模式对浏览器版本有要求：Chrome: 55+ Firefox: V55+。</div>
  <h2>预览，回放功能示例：</h2>
  <textarea id="url" placeholder="这里输入ezopen地址">ezopen://open.ys7.com/140428934/1.hd.live</textarea>
  <textarea id="accessToken" placeholder="这里输入accessToken">at.dvnc3iovbi3lh8881cmj41437jawxvz5-4g39a5ep63-0jevvyn-5o3uxbkut</textarea>
  <textarea id="urlList" placeholder="这里输入ezopen地址">
    ezopen://open.ys7.com/105809781/1.hd.live,
    ezopen://open.ys7.com/108664727/1.hd.live,
    ezopen://open.ys7.com/119957136/1.hd.live,
    ezopen://open.ys7.com/123648658/1.hd.live,
    ezopen://open.ys7.com/126049710/1.hd.live,
    ezopen://open.ys7.com/139404369/1.hd.live,
    ezopen://open.ys7.com/140428934/1.hd.live,
    ezopen://open.ys7.com/140449298/1.hd.live,
    ezopen://open.ys7.com/158663659/1.hd.live,
    ezopen://open.ys7.com/158663714/1.hd.live,
    ezopen://open.ys7.com/176949160/1.hd.live,
    ezopen://open.ys7.com/176949177/1.hd.live,
    ezopen://open.ys7.com/237444430/1.hd.live,
    ezopen://open.ys7.com/243902831/1.hd.live,
    ezopen://open.ys7.com/247892233/1.hd.live,
    ezopen://open.ys7.com/453940576/1.hd.live,
    ezopen://open.ys7.com/488338243/1.hd.live,
    ezopen://open.ys7.com/536934849/1.hd.live,
    ezopen://open.ys7.com/553899398/1.hd.live,
    ezopen://open.ys7.com/562185433/1.hd.live,
    ezopen://open.ys7.com/569620748/1.hd.live,
    ezopen://open.ys7.com/593251216/1.hd.live,
    ezopen://open.ys7.com/594336409/1.hd.live,
    ezopen://open.ys7.com/622538889/1.hd.live,
    ezopen://open.ys7.com/644480867/1.hd.live,




    
  </textarea>
  <div class="btn-container">
    <!-- <button id="init">初始化播放</button> -->
    <button id="play">播放</button>
    <button id="stop">结束</button>
    <button id="getOSDTime">获取OSD时间</button>
    <button id="openSound">打开声音（默认已经开启）</button>
    <button id="closeSound">关闭声音</button>
    <button id="capturePicture">视频截图</button>
    <button id="startSave">开始录像</button>
    <button id="stopSave">停止录像</button>
    <button id="enableZoom">开启电子放大</button>
    <button id="closeZoom">关闭电子放大</button>
    <button id="fullScreen">全屏</button>
    <button id="switch">切换</button>
    <span>录制功能不支持加密视频，且录制的文件需要<a href="https://service.ys7.com/downloadInfoSite/admin" target="_blank">下载海康播放器播放</a></span>

  </div>
  <div id="currentUrl"></div>
  <div id="playWind" style="width: 600px; height: 400px;">
  </div>
  <script>
    function handleError(e){
        console.log('捕获到错误',e)
    }
    function handleSuccess(){
      console.log("播放成功回调函数，此处可执行播放成功后续动作");
    }
    var url = $('#url').val().trim();
    var accessToken = $('#accessToken').val().trim();
    var decoder = new EZUIKit.EZUIPlayer({
      id: 'playWind',
      autoplay: true,
      url: url,
      accessToken: accessToken,
      decoderPath: '',
      width: 600,
      height: 400,
      handleError: handleError,
      handleSuccess: handleSuccess,
    });
    // 这里是打印日志，本例抛出到播放页面
    decoder.on('log', log);
    function log(str,className) {
      var div = document.createElement('DIV');
      div.className=className || 'normal';
      div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
      document.body.appendChild(div);
    }
    $("#start").click(function () {
      function handleError(e){
        console.log('handleError',e)
      }
      function handleSuccess(){
        console.log('handleSuccess')
      }
      decoder.play({
        handleError: handleError,
      });
    })
    $("#stop").click(function () {
      /*停止播放方法1*/
      // decoder.stop();
      /*停止播放方法2 - promise模式*/
      var stopPromise = decoder.stop();
      stopPromise.then(function(){
        console.log("关闭成功，用户执行关闭成功后的操作");
      })
    })
    $("#getOSDTime").click(function () {
      var getOSDTimePromise = decoder.getOSDTime();
      getOSDTimePromise.then(function(data){
        console.log("getOSDTime success",data)
      })
    })
    $("#openSound").click(function () {
      decoder.openSound();
    })
    $("#closeSound").click(function () {
      decoder.closeSound();
    })
    $("#capturePicture").click(function () {
      /*截图方法1*/
      // decoder.capturePicture(0,'default');
        /*截图方法2*/
      var capturePicturePromise = decoder.capturePicture(0,'default');
      capturePicturePromise.then(function(data){
        console.log("截图成功，用户执行关闭成功后的操作",data);
      })
    })
    $("#startSave").click(function () {
      // decoder.startSave(0, (new Date().getTime() + 'video'));
      /*开始录制方法2*/
      var startSavePromise = decoder.startSave(0, (new Date().getTime() + 'video'));
      startSavePromise.then(function(data){
        console.log("start save success",startSavePromise)
      })
      .catch(function(error){
        console.log("start Save error",error)
      })
    })
    $("#stopSave").click(function () {
      /*结束录制方法1*/
      // decoder.stopSave(0);
      /*结束录制方法2*/
      var stopSavePromise = decoder.stopSave(0);
      stopSavePromise.then(function(data){
        console.log("stop save success",stopSavePromise)
      })
      .catch(function(error){
        console.log("stop Save error",error)
      })
    })
    $("#play").click(function () {
      var url = $('#url').val().trim();
      var accessToken = $('#accessToken').val().trim();
      decoder.play({
        url: url,
        accessToken: accessToken,
      });
    })
    $("#enableZoom").click(function () {
      decoder.enableZoom();
    })
    $("#closeZoom").click(function () {
      decoder.closeZoom();
    })
    $("#fullScreen").click(function () {
      decoder.fullScreen();
    });
    var index = -1;
    $("#switch").click(function () {
      decoder.stop()
      .then(()=>{
        console.log("stop promise success");
        index = index+1;
        var urlList = $("#urlList").val().split(",");
        $("#currentUrl").text(`当前播放索引：${index}`);
        if(index === urlList.length -2) {
          $("#currentUrl").text(`已经全部播放`);
          $("#switch").attr('disabled',true);
        }
        decoder.play(urlList[index].trim());
      })
    })
  </script>
</body>

</html>